<template>
    <view style="padding: 10px;">
        <view class="flex-grid-layout top-actions">
            <u-button type="success" text="Plugin测试" @click="toPluginTest"></u-button>
            <u-button type="success" text="Uploader测试" @click="toFileTest"></u-button>
            <u-button type="success" text="蒙电e家" @click="toMdejBlueTest"></u-button>
            <u-button type="success" text="plus.bluetooth测试" @click="toPlusBlueTest"></u-button>
        </view>
        <u-button style="margin-top: 5px;" type="primary" :text="stateBtn.text" :disabled="stateBtn.disabled"
                  @click="searchDevices()">
        </u-button>
        <view>
            <block v-if="filterDeviceList.length>0">
                <view class="device-group-title">{{groupTitle}}</view>
                <view v-for="(item,index) in filterDeviceList" :key="index" class="device-item hor-layout-side-center"
                      :class="{'device-bonded':item.bonded}">
                    <view class="ver-layout">
                        <view class="single-line">name: {{item.name}}</view>
                        <view class="single-line">macc: {{item.address||item.deviceId}}</view>
                    </view>
                    <u-button :disabled="item.bonded" style="width: 15px;padding:3px" type="primary" size="mini"
                              :text="item.bonded?'已配对':'配对'" @click="bondDevice(item)"></u-button>
                    <u-button :disabled="item.connected" style="width:15px;margin-left:10px" type="primary" size="mini"
                              :text="item.connected?'已连接':'连接'" @click="connectDevice(item)"></u-button>
                    <u-button style="width: 20px;margin-left: 10px" type="primary" size="mini"
                              text="发送消息" @click="sendMessage(item)"></u-button>
                </view>
            </block>
            <view v-else class="list-no-data">暂无蓝牙数据</view>
        </view>
    </view>
</template>

<script>
import {
  BlueTooth
} from "./bluetooth.js"

let engine = new BlueTooth()
export default {
  data() {
    return {
      stateBtn: {
        text: "搜索设备",
        disabled: false
      },
      deviceList: [],
      deviceType: 0,
    }
  },
  computed: {
    filterDeviceList() {
      // return this.deviceList.filter(item => item.address === '54:6C:0E:35:78:18')
      return this.deviceList
    },
    groupTitle() {
      return this.deviceType ? "全部设备：" : "已配对设备："
    }
  },
  onLoad() {
    console.log(plus.android)
    // #ifdef app-plus
    engine.setBackListener({
      searchListBack: searchList => this.deviceList = searchList
    })
    // #endif
  },
  methods: {
    searchDevices() {
      this.deviceType = 1
      engine.startSearch({
        searchBtnBack: searchBtn => this.stateBtn = searchBtn,
      })
    },
    bondDevice(item) {
      engine.bondDevice({
        deviceItem: item,
        connectBack: message => uni.showToast({
          title: message
        })
      })
    },
    connectDevice(item) {
      // todo 待完成
    },
    sendMessage(item) {
      // engine.blueData.connectDevice(item.address).then(res => {
      //   console.log(res)
      //   engine.blueData.sendData(item.address, "123456")
      // })
      engine.sendData(item.device)
    },
    toPluginTest() {
      uni.navigateTo({
        url: '../test/test'
      })
    },
    toFileTest() {
      uni.navigateTo({
        url: "../file/file"
      })
    },
    toMdejBlueTest() {
      uni.navigateTo({
        url: "../mdej/mdej"
      })
    },
    toPlusBlueTest() {
      uni.navigateTo({
        url: "../plus/plus"
      })
    }
  }
}
</script>

<style scoped>
    .device-item {
        margin: 5px 0px;
        padding: 5px 5px;
        border: 1px solid #2C405A;
        background: #ffaa7f;
        border-radius: 5px;
    }

    .device-item > view {
        flex: 1;
        flex-shrink: 1;
        color: white;
        font-size: small;
    }

    .device-item.device-bonded {
        background: #f3a8ff;
    }

    .device-group-title {
        width: fit-content;
        margin: 10px 0px;
        background: #3F536E;
        padding: 5px 10px;
        border-radius: 5px;
        color: white;
    }

    .top-actions {
        width: fit-content;
        margin-top: 5px;
    }

    .top-actions > * {
        width: 46%;
        margin-top: 5px;
        margin-right: 2%;
    }
</style>
